// globalComponents.ts
import PreviewLayout from '@/components/dragdrop/PreviewLayout.vue';

import WaterUseDaily from '../water/echars/components/WaterUseDaily.vue';
import { App, defineComponent, h } from 'vue';

/**
 * 定义和注册一个组件
 * h( 元素，属性，显示的内容 )
 * defineComponent（函数，数据类型）接收一个对象或一个函数，返回一个Vue组件
 */
export function registerGlobalComponents(app: App) {
    app.component(
        'demo-component',
        defineComponent(
            (props: { data: DragItemData }) => {
                return () =>
                    h(
                        'div',
                        {
                            style: {
                                width: '100%',
                                height: '100%',
                                color: '#fff',
                                backgroundColor: '#707eb1',
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                                fontSize: '26px',
                                fontWeight: '600'
                            }
                        },
                        `${props.data.column}x${props.data.row}`
                    );
            },
            {
                props: ['data']
            }
        )
    );
    //注册组件
    app.component('WaterUseDaily', WaterUseDaily),
        app.component('PreviewLayout', PreviewLayout);
}
